<template>
  <div class="mainPage">
    <el-card class="announcement">
        <div slot="header" class="noticeHeader">
            <span style="float: left">最近公告</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
        </div>
    </el-card>
    <el-card class="ongoingExamination">
        <div slot="header" class="clearfix">
            <span style="float: left">正在进行的考试</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
        </div>
    </el-card>
    <el-card class="completedExamination">
        <div slot="header" class="clearfix">
            <span style="float: left">已完成的考试</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                label="Date"
                prop="date">
            </el-table-column>
            <el-table-column
                label="Name"
                prop="name">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            </el-table-column>
            <el-table-column
                align="right">
                <template slot="header">
                    <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                    type="primary"
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
            }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
            }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
            }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
            }],
            search: ''
        }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
}
</script>

<style>
.mainPage {
    position:relative;
    width:100%;
    height: 100%;
    padding: 10px;
}
.announcement {
    float: left;
    width: 48%;
    height: 30%;
    margin: 1%;
}
.ongoingExamination {
    float: right;
    width: 48%;
    height: 30%;
    margin: 1%;
}
.completedExamination {
    float: bottom;
    width: 98%;
    height: 50%;
    margin: 1%;    
}
.noticeHeader {
    position: relative;
}
</style>